<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片压缩Demo</title>
</head>
<body>
	<input type="file" id="file">
	<input type="button" value="压缩" id="btn">
	<div>
		压缩前：<img src="" alt="" id="img1" style="width:200px;">
		大小: <span id="size1"></span>
	</div>
	<div>
		压缩后：<img src="" alt="" id="img2" style="width:200px;">
		大小: <span id="size2"></span>
	</div>

<script type="text/javascript" src="megapix-image.js"></script>
<script type="text/javascript" src="image-compress.js"></script>
<script type="text/javascript">
	
var file;
var fileTarget;
document.querySelector('#file').addEventListener('change',function(e){
	console.log(e);
	fileTarget = e;
	file = e.target.files[0];
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(){
		// console.log(this.result)
		document.querySelector('#img1').src = this.result;	
		document.querySelector('#size1').innerText = file.size;
	};
	
});

document.querySelector('#btn').addEventListener('click',function(){
	new imageCompress().init().changeUploadFile(fileTarget,function(obj){
		console.log(obj);
		var imgLen = obj.fileBase64Str.length;
		var fileBase64Str = obj.fileBase64Str;//压缩后获得的base64字符串
		document.querySelector('#img2').src = fileBase64Str;	
		document.querySelector('#size2').innerText = imgLen;

	})


});



</script>
</body>
</html>